import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
import ReactPlayer from "react-player";
import Admonition from "@theme/Admonition";

# Chat Widget

<div style={{ marginBottom: "20px" }}>
  The <b>Langflow Chat Widget</b> is a powerful web component that enables
  communication with a Langflow project. This widget allows for a chat interface
  embedding, allowing the integration of Langflow into web applications
  effortlessly.
</div>

## Features

🌟 **Seamless Integration:** Easily integrate the Langflow Chat Widget into your website or web application with just a few lines of JavaScript.

🚀 **Interactive Chat Interface:** Engage your users with a user-friendly conversation, powered by Langflow's advanced language understanding capabilities.

🎛️ **Customizable Styling:** Customize the appearance of the chat widget to match your application's design and branding.

🌐 **Multilingual Support:** Communicate with users in multiple languages, opening up your application to a global audience.

---

## Usage

<div style={{ marginBottom: "20px" }}>
  You can get the HTML code embedded with the chat by clicking the Code button
  at the Sidebar after building a flow.
</div>

{" "}

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/widget-sidebar.png"),
    dark: useBaseUrl("img/widget-sidebar.png"),
  }}
  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
/>

<div style={{ marginBottom: "20px" }}>
  Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read
  below to learn how to use it with HTML, React and Angular.
</div>

{" "}

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: useBaseUrl("img/widget-code.png"),
    dark: useBaseUrl("img/widget-code.png"),
  }}
  style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
/>

---

### HTML

The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as demonstrated in the video below.

<div
  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
>
  <ReactPlayer playing controls url="/videos/langflow_widget.mp4" />
</div>

---

### React

To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React _index.html_ file, inside the _`<body>`_ tag:

```html
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
```

Then, declare your Web Component and encapsulate it in a React component.

```jsx
declare global {
  namespace JSX {
    interface IntrinsicElements {
      "langflow-chat": any;
    }
  }
}

export default function ChatWidget({ className }) {
  return (
    <div className={className}>
      <langflow-chat
        chat_inputs='{"your_key":"value"}'
        chat_input_field="your_chat_key"
        flow_id="your_flow_id"
        host_url="langflow_url"
      ></langflow-chat>
    </div>
  );
}
```

Finally, you can place the component anywhere in your code to display the Chat Widget.

---

### Angular

To use it in Angular, first add this _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.

```html
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
```

When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add _`CUSTOM_ELEMENTS_SCHEMA`_ to the module's _`@NgModule.schemas`_.

- Open the module file (it typically ends with _.module.ts_) where you'd add the _`langflow-chat`_ web component.
- Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file:

```ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
```

- Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator:

```ts
@NgModule({
  declarations: [
    // ... Other components and directives ...
  ],
  imports: [
    // ... Other imported modules ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here
})
export class YourModule {}
```

In your Angular project, find the component belonging to the module where _`CUSTOM_ELEMENTS_SCHEMA`_ was added.

- Inside the template, add the _`langflow-chat`_ tag to include the Chat Widget in your component's view:

```jsx
<langflow-chat
  chat_inputs='{"your_key":"value"}'
  chat_input_field="your_chat_key"
  flow_id="your_flow_id"
  host_url="langflow_url"
></langflow-chat>
```

<Admonition type="info">
  <ul>
    <li>
      _`CUSTOM_ELEMENTS_SCHEMA`_ is a built-in schema that allows Angular to
      recognize custom elements.
    </li>
    <li>
      Adding _`CUSTOM_ELEMENTS_SCHEMA`_ tells Angular to allow custom elements
      in your templates, and it will suppress the warning related to unknown
      elements like _`langflow-chat`_.
    </li>
    <li>
      Notice that you can only use the Chat Widget in components that are part
      of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.
    </li>
  </ul>
</Admonition>

---

## Configuration

Use the widget API to customize your Chat Widget:

<Admonition type="caution">
  Props with the type JSON need to be passed as Stringified JSONs, with the
  format &#123;<span>"key":"value"</span>&#125;.
</Admonition>

| Prop                  | Type    | Required | Description                                                                                                                                                      |
| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bot_message_style     | JSON    | No       | Applies custom formatting to bot messages.                                                                                                                       |
| chat_input_field      | String  | Yes      | Defines the type of the input field for chat messages.                                                                                                           |
| chat_inputs           | JSON    | Yes      | Determines the chat input elements and their respective values.                                                                                                  |
| chat_output_key       | String  | No       | Specifies which output to display if multiple outputs are available.                                                                                             |
| chat_position         | String  | No       | Positions the chat window on the screen (options include: top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left). |
| chat_trigger_style    | JSON    | No       | Styles the chat trigger button.                                                                                                                                  |
| chat_window_style     | JSON    | No       | Customizes the overall appearance of the chat window.                                                                                                            |
| error_message_style   | JSON    | No       | Sets the format for error messages within the chat window.                                                                                                       |
| flow_id               | String  | Yes      | Identifies the flow that the component is associated with.                                                                                                       |
| height                | Number  | No       | Sets the height of the chat window in pixels.                                                                                                                    |
| host_url              | String  | Yes      | Specifies the URL of the host for chat component communication.                                                                                                  |
| input_container_style | JSON    | No       | Applies styling to the container where chat messages are entered.                                                                                                |
| input_style           | JSON    | No       | Sets the style for the chat input field.                                                                                                                         |
| online                | Boolean | No       | Toggles the online status of the chat component.                                                                                                                 |
| online_message        | String  | No       | Sets a custom message to display when the chat component is online.                                                                                              |
| placeholder           | String  | No       | Sets the placeholder text for the chat input field.                                                                                                              |
| placeholder_sending   | String  | No       | Sets the placeholder text to display while a message is being sent.                                                                                              |
| send_button_style     | JSON    | No       | Sets the style for the send button in the chat window.                                                                                                           |
| send_icon_style       | JSON    | No       | Sets the style for the send icon in the chat window.                                                                                                             |
| tweaks                | JSON    | No       | Applies additional custom adjustments for the associated flow.                                                                                                   |
| user_message_style    | JSON    | No       | Determines the formatting for user messages in the chat window.                                                                                                  |
| width                 | Number  | No       | Sets the width of the chat window in pixels.                                                                                                                     |
| window_title          | String  | No       | Sets the title displayed in the chat window's header or title bar.                                                                                               |
